<!DOCTYPE html>
<html style="height: 100%; font-size: 10px;" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="viewport" content="initial-scale=1,user-scalable=no">
    <link rel="icon" href="http://app.mengzhuly.info/personal/favicon.ico">
    <link rel="apple-touch-icon" href="http://app.mengzhuly.info/personal/apple-touch-icon.png">
    <title>萌猪乐园</title>
    <style type="text/css">body, ul, li {
            padding: 0;
            margin: 0
        }

        li {
            list-style: none
        }

        #beecloud-pay {
            width: 100%;
            height: 100%;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.pay-list-bg.png?8) repeat;
            position: fixed;
            left: 0;
            top: 0;
            text-align: center;
            z-index: 9998;
            display: none
        }

        #beecloud-pay.open {
            display: block
        }

        #beecloud-pay-list {
            width: 280px;
            margin: 0 auto;
            padding: 30px 20px 20px;
            position: fixed;
            background-color: #fff;
            text-align: center;
            box-shadow: 0 0 8px #999;
            z-index: 9999
        }

        .beecloud-pay-btn {
            width: 100%;
            height: 45px;
            background-color: #f1f1f1;
            margin: 5px 0;
            cursor: pointer;
            font-size: 18px;
            font-family: "Microsoft YaHei";
            display: inline-block;
            line-height: 45px;
            text-align: center;
            font-weight: 700
        }

        .beecloud-pay-btn span {
            display: inline-block;
            text-align: center;
            width: 124px;
            vertical-align: middle
        }

        .beecloud-pay-close {
            width: 30px;
            height: 30px;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.close3.png?8) center no-repeat;
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer
        }

        .beecloud-pay-btn.channel-un i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-un i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-unwap i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-unwap i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-ali i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-ali i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-wxmp i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-wxmp i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bcwxmp i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bcwxmp i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-wx i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-wx i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bcwx i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bcwx i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-wxwap i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-wxwap i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bcwxwap i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bcwxwap i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-jd i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.jd.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-jd i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.jd.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bd i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.bd.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bd i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.bd.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-yee i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.yb.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-yee i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.yb.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-kuaiqian i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.kq.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-kuaiqian i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.kq.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bckj i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bckj i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bcaliqr i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bcaliqr i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bcali i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bcali i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
                background-size: contain
            }
        }

        #beecloud-pay .beecloud-wx {
            padding: 35px;
            width: 250px;
            height: 250px;
            margin: 0 auto;
            background-color: #fff;
            position: relative
        }

        #beecloud-pay-loading {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            border-radius: 8px;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.loading.gif?8) center no-repeat;
            background-size: 30px 30px
        }

        @media (max-width: 450px) {
            #beecloud-pay-list {
                width: 100%;
                box-shadow: none;
                padding: 15px 0;
                position: fixed;
                left: 0;
                bottom: 0;
                -webkit-animation: payListMove .5s ease-in-out 0s alternate
            }

            @-webkit-keyframes payListMove {
                0% {
                    bottom: -500px
                }
                100% {
                    bottom: 0
                }
            }.beecloud-pay-btn {
                 width: 90%;
                 height: 40px;
                 line-height: 40px;
                 font-size: 18px
             }

            .beecloud-pay-close {
                display: none
            }
        }</style>
    <script>if (document.documentElement.clientWidth > 600) {
            document.documentElement.style.fontSize = 6000 / 375 + 'px'
        } else {
            document.documentElement.style.fontSize = document.documentElement.clientWidth * 10 / 375 + 'px'
        }</script>

    <?= \yii\helpers\Html::jsFile('@web/static/js/jquery-3.5.1.min.js') ?>
    <?= \yii\helpers\Html::cssFile('@web/static/read/chunk-045ff2f8.css') ?>
    <?= \yii\helpers\Html::cssFile('@web/static/read/chunk-17b3dae2.css') ?>
    <?= \yii\helpers\Html::cssFile('@web/static/read/chunk-429105c2.css') ?>
    <?= \yii\helpers\Html::cssFile('@web/static/read/chunk-67f67122.css') ?>
    <?= \yii\helpers\Html::cssFile('@web/static/read/chunk-9b4cfa18.css') ?>
    <?= \yii\helpers\Html::cssFile('@web/static/read/chunk-vendors.css') ?>
    <?= \yii\helpers\Html::cssFile('@web/static/read/app.css') ?>

    <style type="text/css">.infinite-loading-container[data-v-358985eb] {
            clear: both;
            text-align: center
        }

        .infinite-loading-container[data-v-358985eb] [class^=loading-] {
            display: inline-block;
            margin: 5px 0;
            width: 28px;
            height: 28px;
            font-size: 28px;
            line-height: 28px;
            border-radius: 50%
        }

        .btn-try-infinite[data-v-358985eb] {
            margin-top: 5px;
            padding: 5px 10px;
            color: #999;
            font-size: 14px;
            line-height: 1;
            background: transparent;
            border: 1px solid #ccc;
            border-radius: 3px;
            outline: none;
            cursor: pointer
        }

        .btn-try-infinite[data-v-358985eb]:not(:active):hover {
            opacity: .8
        }</style>
</head>
<body style="margin: 0 auto; padding: 0; font-size: 1.3rem; width:37.5rem; height: 100%;font-family: 微软雅黑">
<noscript><strong>We're sorry but huzhu_vue_app doesn't work properly without JavaScript enabled. Please enable it to
        continue.</strong></noscript>
<div id="app"><!---->
    <div data-v-9cc1e82a="" id="view">
        <div data-v-9cc1e82a="" class="views">
            <div data-v-ab162698="" data-v-9cc1e82a="" class="transDetail">
                <div data-v-5044dc97="" data-v-ab162698="" class="publicHeader">
                    <a style="color:black" href="javascript:history.go(-1)" data-v-5044dc97=""><i data-v-5044dc97="" class="iconfont icon-fanhui-"></i></a>
                    <div data-v-5044dc97="" scop="">交易详情</div>
                    <div data-v-5044dc97=""><!----></div>
                </div>
                <div data-v-ab162698="" class="body">
                    <div data-v-ab162698="" class="van-cell-group van-hairline--top-bottom">
                        <div data-v-ab162698="" class="van-cell">
                            <div data-v-ab162698="" class="van-cell__title"><span data-v-ab162698="">交易单号</span></div>
                            <div data-v-ab162698="" class="van-cell__value"><span
                                        data-v-ab162698=""><?= $Data['order_sn'] ?></span></div>
                        </div>
                        <div data-v-ab162698="" class="goodsInfo">
                            <div data-v-ab162698=""><img data-v-ab162698=""
                                                         src="<?= $Data['img_url'] ?>"
                                                         alt="暂无图片" width="60"></div>
                            <div data-v-ab162698="">
                                <div data-v-ab162698=""><?= $Data['product_name'] ?></div>
                                <div data-v-ab162698="">
                                    <div data-v-ab162698="">
                                        <div data-v-ab162698="">领养价格: <?= $Data['price'] ?></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div data-v-ab162698="" class="van-cell">
                            <div data-v-ab162698="" class="van-cell__title"><span data-v-ab162698="">领养时间</span></div>
                            <div data-v-ab162698="" class="van-cell__value"><span
                                        data-v-ab162698=""><?= $Data['ctime'] ?></span></div>
                        </div>
                        <div data-v-ab162698="" class="van-cell">
                            <div data-v-ab162698="" class="van-cell__title"><span data-v-ab162698="">状态</span></div>
                            <div data-v-ab162698="" class="van-cell__value"><span data-v-ab162698="">
                                    <?php if ($Data['status'] == 1): ?>
                                        待付款
                                    <?php elseif ($Data['status'] == 2): ?>
                                        待确认
                                    <?php endif; ?>
                                </span></div>
                        </div>
                        <div data-v-ab162698=""></div><!---->
                        <div data-v-ab162698="" class="van-cell">
                            <div data-v-ab162698="" class="van-cell__title"><span data-v-ab162698="">凭证</span></div>
                            <div data-v-ab162698="" class="van-cell__value" id="img_div">
                                <?php if ($Data['mark']): ?>
                                    <img data-v-ab162698="" src="<?= $Data['mark'] ?>"
                                         alt="" class="vouImg">
                                <?php else: ?>
                                    <div class="van-uploader__upload"><i
                                                class="van-icon van-icon-photograph van-uploader__upload-icon">
                                            <!----></i><input type="file" accept="image/*" class="van-uploader__input"
                                                              id="uploadImg">
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <div data-v-ab162698="" class="btnDiv"><!---->
                            <?php if ($Data['mark']): ?>
                                <?php if(date("Y-m-d H:i:s") > $Data['new_time']):?>
                                <button data-v-ab162698="" id="appeal"
                                        class="van-button van-button--primary van-button--small van-button--block"
                                        style="color: rgb(255, 255, 255); background: rgb(255, 205, 88) none repeat scroll 0% 0%; border-color: rgb(255, 205, 88);"><span
                                            data-v-ab162698="" class="van-button__text">
                                申 诉 </span>
                                </button>
                                <?php endif;?>
                            <?php else: ?>
                                <input type="hidden" id="mark_img">
                                <button data-v-ab162698="" id="commit_img"
                                        class="van-button van-button--default van-button--small van-button--block"
                                        style="color: rgb(255, 255, 255); background: rgb(255, 205, 88) none repeat scroll 0% 0%; border-color: rgb(255, 205, 88);"><span
                                            data-v-ab162698="" class="van-button__text">
                                提 交 </span>
                                </button>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <div data-v-ab162698="" class="body">
                    <div data-v-ab162698="">
                        <div data-v-ab162698="" class="zhanghu">
                            卖家账户信息
                        </div>
                        <div data-v-ab162698="" class="van-tabs van-tabs--line">
                            <div class="van-tabs__wrap van-hairline--top-bottom">
                                <div role="tablist" class="van-tabs__nav van-tabs__nav--line"
                                     style="border-color: rgb(112, 188, 22);">
                                    <div role="tab" id="ali_tbn" aria-selected="true"
                                         class="van-tab van-tab--active van-ellipsis">
                                        <span class="van-tab__text">支付宝<!----></span></div>
                                    <div role="tab" id="bank_tbn" class="van-tab van-ellipsis"><span
                                                class="van-tab__text">银行卡
                                            <!----></span></div>
                                    <div class="van-tabs__line" id="ali_class"
                                         style="background-color: rgb(112, 188, 22); width: 86.5px; transform: translateX(86.5px) translateX(-50%); transition-duration: 0.3s;"></div>
                                    <div class="van-tabs__line" id="bankCard_class"
                                         style="display:none;background-color: rgb(112, 188, 22); width: 86.5px; transform: translateX(250px) translateX(-50%); transition-duration: 0.3s;"></div>
                                </div>
                            </div>
                            <div class="van-tabs__content">
                                <div data-v-ab162698="" role="tabpanel" class="accountDiv van-tab__pane" id="aliInfo"
                                     style="">
                                    <div data-v-ab162698="">
                                        <div data-v-ab162698="" class="typeInfo">
                                            <div data-v-ab162698="">姓名：<?= $Data['aliPay']['real_name'] ?></div><!---->
                                            <!----></div>
                                        <div data-v-ab162698="">
                                            <div data-v-ab162698="">
                                                <a data-v-ab162698=""
                                                   href="<?= $Data['aliPay']['alipay_img'] ?>"><img
                                                            data-v-ab162698=""
                                                            src="<?= $Data['aliPay']['alipay_img'] ?>"
                                                            alt=""></a></div>
                                        </div>
                                    </div>
                                </div>
                                <div data-v-ab162698="" role="tabpanel" class="accountDiv van-tab__pane"
                                     style="display: none;" id="bankCard_info">
                                    <div data-v-ab162698="">
                                        <div data-v-ab162698="" class="typeInfo">
                                            <div data-v-ab162698="" id="bank_real_name">
                                                姓名：<?= $Data['bandCard']['real_name'] ?></div><!----><!----></div>
                                        <div data-v-ab162698="" id="account">
                                            账号：<?= $Data['bandCard']['account_number'] ?></div><!----><!----></div>
                                    <div data-v-ab162698="" id="bank_mark">开户行：<?= $Data['bandCard']['mark'] ?></div>
                                    <!----><!----></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!----></div>
    <audio src="" autoplay="autoplay" id="audio"></audio>
</div>
</body>
<script>
    $(document).on('click', '#ali_tbn', function () {
        $("#aliInfo").show();
        $("#bankCard_info").hide();
        $("#ali_class").show();
        $("#bankCard_class").hide();
    });

    $(document).on('click', '#bank_tbn', function () {
        $("#aliInfo").hide();
        $("#bankCard_info").show();
        $("#ali_class").hide();
        $("#bankCard_class").show();
    });

    $(document).on('change', '#uploadImg', function (e) {
        var formData = new FormData();
        formData.append('file', document.getElementById('uploadImg').files[0]);
        formData.append('_csrf', '<?= Yii::$app->request->csrfToken?>')
        $.ajax({
            url: "<?= \yii\helpers\Url::toRoute('site/ajax-upload')?>",
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function (data) {
                if (data.code == 200) {
                    $("#mark_img").val(data.data.img_url);
                    $("#img_div").html('<img data-v-ab162698="" src="' + data.data.img_url + '" alt="" class="vouImg">')
                } else {
                    alert(data.msg);
                }
            },
            error: function (msg) {
                alert(msg);
            }
        });
    })

    $(document).on('click', '#commit_img', function () {
        var mark_img = $("#mark_img").val();
        if (mark_img == '' || mark_img == undefined || mark_img == null) {
            alert('请上传图片');
            return false;
        }
        $.post("<?= \yii\helpers\Url::toRoute('site/pay-order')?>", {
            _csrf: "<?= Yii::$app->request->csrfToken?>",
            id: "<?= $id?>",
            mark: mark_img
        }, function (data) {
            if (data.code == 200) {
                alert(data.msg);
                location.href = '';
            } else {
                alert(data.msg);
            }
        });
    });

    //申诉
    $(document).on('click', "#appeal", function (e) {
        location.href = "<?= \yii\helpers\Url::toRoute('site/appeal')?>?id=<?= $id?>"
    })
</script>

</html>